import React,{Component} from 'react';
import PropTypes from 'prop-types'
import LongItem from './longItem.js'
import $ from 'jquery'
import iScroll from "iscroll/build/iscroll-probe";
export default class RefreshList extends Component{
    iScrollInstance=null;
    pullUpTips = {
        // 下拉状态
        0: '下拉刷新',
        1: '松手即可刷新',
        2: '正在刷新',
        3: '刷新成功',
        4: '刷新失败'
    };
    pullDownTips = {
        // 上拉状态
        0: '上拉加载',
        1: '松手即可加载',
        2: '正在加载',
        3: '加载成功',
        4: '加载失败'

    };
    initTipsHeight(){
        this.height.upHeight=$(this.refs.up).height()||0;
        this.height.downHeight=$(this.refs.down).height()||0;
    }
    height={
        upHeight:0,
        maxUp:0,
        downHeight:0
    };
    state={
        pullUpTips:0,
        pullDownTips:0
    };
    componentDidMount(){
        this.initTipsHeight();
        const options = {
            // 默认iscroll会拦截元素的默认事件处理函数，我们需要响应onClick，因此要配置
            preventDefault: false,
            // 禁止缩放
            zoom: false,
            // 支持鼠标事件，因为我开发是PC鼠标模拟的
            mouseWheel: false,
            momentum:true,
            // 滚动事件的探测灵敏度，1-3，越高越灵敏，兼容性越好，性能越差
            probeType: 3,
            // 拖拽超过上下界后出现弹射动画效果，用于实现下拉/上拉刷新
            bounce: true,
            // 展示滚动条
            scrollbars: false,
            startY:-this.height.upHeight

        };
        this.iScrollInstance = new iScroll("#refreshScroll", options);
        this.iScrollInstance.on('scroll', this.onScroll);
        this.iScrollInstance.on('scrollEnd', this.scrollEnd);
        document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
    }
    componentWillUnmount(){
        document.removeEventListener('touchmove',function (e) { e.preventDefault(); });
        this.iScrollInstance.destroy();
        this.iScrollInstance=null;
    }
    loading={
        up:false,
        down:false
    };
    tipsNumber=0;
    upHandler(){
        if(this.touch){
            if(this.iScrollInstance.y>0&&this.state.pullUpTips==0){
                this.setState({
                    pullUpTips:1
                });
            }
            if(this.iScrollInstance.y<0&&this.state.pullUpTips==1){
                this.setState({
                    pullUpTips:0
                });
            }
        }
    }
    downHandler(){
        if(this.touch){
            if(this.iScrollInstance.y<this.iScrollInstance.maxScrollY&&this.state.pullDownTips==0){
                this.setState({
                    pullDownTips:1
                });
            }
            if(this.iScrollInstance.y>this.iScrollInstance.maxScrollY&&this.state.pullDownTips==1){
                this.setState({
                    pullDownTips:0
                });
            }
        }
    }
    onScroll=()=>{
        if(this.loading.up) return;
        if(this.loading.down) return;
        if(this.iScrollInstance.y>-this.height.upHeight){
            if(!this.props.isFresh)return;
            this.upHandler()
        }
        if(this.iScrollInstance.y<this.iScrollInstance.maxScrollY+this.height.downHeight){
            if(!this.props.isLoad)return;
            this.downHandler()
        }
    };
    scrollEnd=()=>{
        if(this.touch) return;
        if(this.loading.up) return;
        if(this.loading.down) return;
        // 上拉 刷新
        if(this.iScrollInstance.y>-this.height.upHeight){
            if(!this.props.isFresh) return;
            if(this.state.pullUpTips<1){
                this.iScrollInstance.scrollTo(0,-this.height.upHeight,100);
                this.setState({
                    pullUpTips:0
                });
                return;
            }
            this.iScrollInstance.scrollTo(0,0,100);
            this.setState({
                pullUpTips:this.state.pullUpTips==0?0:2
            });
            if(this.loading.up)return;
            this.loading.up=true;
            this.props.upFresh?this.props.upFresh(this.upFresh):this.upFresh();
            return;
        }
        //下拉加载
        if(this.iScrollInstance.y<this.iScrollInstance.maxScrollY+this.height.downHeight){
            if(!this.props.isLoad)return;
            if(this.state.pullDownTips<1){
                this.iScrollInstance.scrollTo(0,this.iScrollInstance.maxScrollY+this.height.downHeight,100);
                this.setState({
                    pullDownTips:0
                });
                return;
            }
            this.iScrollInstance.scrollTo(0,this.iScrollInstance.maxScrollY,100);
            this.setState({
                pullDownTips:this.state.pullDownTips==0?0:2
            });
            if(this.loading.down)return;
            this.loading.down=true;
            this.props.downLoad?this.props.downLoad(this.downFresh):this.downFresh();
            return;
        }
    };
    componentDidUpdate(){
        this.iScrollInstance.refresh();
    }
    upFresh=(type)=>{
        switch (type){
            case 1:
                this.setState({
                    pullUpTips:3
                });

                setTimeout(()=>{
                    this.setState({
                        pullUpTips:0
                    });
                    this.loading.up=false;
                    this.iScrollInstance.scrollTo(0,-this.height.upHeight,100);
                },300);

                return;
            case 2:
                this.setState({
                    pullUpTips:4
                });

                setTimeout(()=>{
                    this.setState({
                        pullUpTips:0
                    });
                    this.loading.up=false;
                    this.iScrollInstance.scrollTo(0,-this.height.upHeight,100);
                },300);
                return;
            default :
                this.setState({
                    pullUpTips:4
                });

                setTimeout(()=>{
                    this.setState({
                        pullUpTips:0
                    });
                    this.loading.up=false;
                    this.iScrollInstance.scrollTo(0,-this.height.upHeight,100);
                },300);
                return;
        }
    }
    downFresh=(type)=>{
        switch (type){
            case 1:
                this.setState({
                    pullDownTips:3
                });

                setTimeout(()=>{
                    this.setState({
                        pullDownTips:0
                    });
                    this.loading.down=false;
                    this.iScrollInstance.scrollTo(0,this.iScrollInstance.maxScrollY+this.height.downHeight,100);
                },300);

                return;
            case 2:
                this.setState({
                    pullDownTips:4
                });

                setTimeout(()=>{
                    this.setState({
                        pullDownTips:0
                    });
                    this.loading.down=false;
                    this.iScrollInstance.scrollTo(0,this.iScrollInstance.maxScrollY+this.height.downHeight,100);
                },300);
                return;
            default :
                this.setState({
                    pullDownTips:4
                });

                setTimeout(()=>{
                    this.setState({
                        pullDownTips:0
                    });
                    this.loading.down=false;
                    this.iScrollInstance.scrollTo(0,this.iScrollInstance.maxScrollY+this.height.downHeight,100);
                },300);
                return;
        }
    }
    touch=false;
    touchStart=(e)=>{
        this.touch=true;
    };
    touchEnd=()=>{
        this.touch=false;
    };
    render(){
        return(
            <div className="refresh-container" onTouchStart={this.touchStart} onTouchEnd={this.touchEnd}>
                <div id="refreshScroll" style={{height:800,overflow:"hidden"}}>
                  <div>
                      {
                          this.props.isFresh?
                          (<div className="refresh-up" ref="up">
                              <p>{this.pullUpTips[this.state.pullUpTips]}</p>
                          </div>)
                          :
                          null
                      }
                      <div>
                          {
                              this.props.Data.map((key,i)=>{
                                  return this.props.Row(key,i)
                              })
                          }
                      </div>
                      {
                          this.props.isLoad?
                              (<div className="refresh-down" ref="down">
                                  <p>{this.pullDownTips[this.state.pullDownTips]}</p>
                              </div>)
                              :
                              null
                      }

                  </div>
                </div>
            </div>
        )
    }
}
RefreshList.prototypes={
    isFresh:PropTypes.bool.isRequired,
    isLoad:PropTypes.bool.isRequired,
    contentHeight:PropTypes.number.isRequired,
    Data:PropTypes.array.isRequired,
    Row:PropTypes.node
}
RefreshList.defaultProps={
    contentHeight:1000,
    isFresh:false,
    isLoad:false
}
